<template>
	<view class="stauts-step">
		<view class="bg-line" v-if="list.length > 0">
			<view class="bg-line-content" :style="{ width: (100 / (list.length - 1)) * actIndex + '%' }"></view>
		</view>
		<view class="stauts-step-item" v-for="(item, index) in list" :key="index">
			<image :src="item.icon" v-if="index <= actIndex"></image>
			<view class="icon" v-else></view>
			<view class="name">
				<view :style="{ color: index <= actIndex ? '#0091ff' : '#666' }">{{ item.name }}</view>
			</view>
			<view class="date" v-if="log[index]">
				<view>{{ log[index].createTime.slice(0, 10) }}</view>
				<view>{{ log[index].createTime.slice(11, 19) }}</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'stautsStep',
	props: {
		actIndex: {
			type: [Number, String],
			default: -1
		},
		list: {
			type: Array,
			default: () => {
				return [
					{
						status: 1,
						name: '待开始',
						icon: '/static/images/step1.png'
					},
					{
						status: 2,
						name: '进行中',
						icon: '/static/images/step2.png'
					},
					{
						status: 4,
						name: '已完成',
						icon: '/static/images/step3.png'
					}

				];
			}
		},
		log: {
			type: Array
		}
	},
};
</script>

<style lang="scss" scoped>
.stauts-step {
	display: flex;
	justify-content: space-between;
	height: 156rpx;
	width: 536rpx;
	padding: 0 30rpx;
	margin: 0 auto;
	position: relative;

	.bg-line {
		width: 502rpx;
		height: 4rpx;
		background: #cdd9e1;
		border-radius: 4rpx;
		left: 47rpx;
		position: absolute;
		top: 22rpx;
		overflow: hidden;

		&-content {
			width: 0;
			height: 4rpx;
			background-color: #0091ff;
		}
	}

	&-item {
		z-index: 8;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 48rpx;
		height: 48rpx;

		image {
			width: 48rpx;
			border-radius: 50%;
			height: 48rpx;
			background-color: #0091ff;
		}

		.icon {
			width: 24rpx;
			height: 24rpx;
			background: #cdd9e1;
			border-radius: 50%;
		}

		.name {
			text-align: center;
			position: absolute;
			bottom: -45rpx;
			width: 100rpx;
			font-size: 26rpx;
			left: -24rpx;
		}

		.date {
			text-align: center;
			position: absolute;
			bottom: -106rpx;
			width: 154rpx;
			font-size: 26rpx;
			left: -46rpx;
			font-size: 22rpx;
			color: #999;
		}
	}
}
</style>
